<template>
	<custom-page :float="true" title="实名认证" background-color="transparent" nav-background-color="transparent"
		borderBottomColor="transparent">
		<template #page>
			<view class="page-content">
				<view class="title">实名认证</view>
				<view class="tips">申请成为助教，请先实名认证</view>
				<view class="item-row">
					<view>真实姓名</view>
					<input v-model="realNameApproveName" placeholder="请输入真实姓名" />
				</view>
				<picker @change="certificateTypeChange" :value="certificateTypeIndex"
					:range="certificateTypeDatas.map((e) => e.text)">
					<view class="item-row">
						<view>证件类型</view>
						<input v-model="certificateTypeDatas[certificateTypeIndex].text" :disabled="true"
							placeholder="请选择证件类型" />
						<image class="right-img" :src="asserts.ic_arrow_right"></image>
					</view>
				</picker>
				<view class="item-row">
					<view>证件号码</view>
					<input v-model="certificateNumber" type="idcard" placeholder="请输入证件号码" />
				</view>
				<view class="confirm-btn" :class="vaildPhone?'':'enable'" @click="confirmClick">确认</view>
			</view>
		</template>
	</custom-page>
</template>
<script>
	import {
		storageUserType
	} from '../../global/config.js'
	export default {
		computed: {
			vaildPhone() {
				let myreg = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
				if (!this.realNameApproveName) {
					return false;
				} else if (!this.certificateNumber) {
					return false;
				} else if (!myreg.test(this.certificateNumber)) {
				  return false;
				} else {
					return true
				}
			},

		},
		data() {
			return {
				realNameApproveName: '',
				certificateNumber: '',
				certificateTypeDatas: [{
						value: '1',
						text: '身份证'
					},
					{
						value: '2',
						text: '驾驶证'
					},
					{
						value: '3',
						text: '其他证件'
					}
				],
				certificateTypeIndex: 0,
			}
		},
		methods: {
			//选证件类型
			certificateTypeChange(e) {
				this.certificateTypeIndex = e.detail.value
			},

			//点击确定
			confirmClick() {
				if(!this.vaildPhone){
					return
				}
				uni.showModal({
					title: '确定保存吗？',
					success: (modal) => {
						if (modal.confirm) {
							let params = {
								realNameApproveName: this.realNameApproveName,
								certificateType: this.certificateTypeDatas[this.certificateTypeIndex].value,
								certificateNumber: this.certificateNumber,
							}
							this.requestCenter.addAssistantInfo(params).then(res => {
								uni.showToast({
									title: "申请成功",
									duration: 500,
									complete: () => {
										uni.setStorageSync(storageUserType, "2")		//用户类型 1 - 普通用户 2 - 助教用户
										uni.navigateTo({
											url: '/pages/assistant-personal-info/assistant-personal-info?type=certification'
										})
									}
								})
							})
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page-content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		padding: 0 56rpx;
		box-sizing: border-box;
		background: linear-gradient(180deg, #F5FFFE 0%, #F9F8FD 100%);
	}

	.title {
		font-size: 56rpx;
		color: #021624;
		margin-top: 260rpx;
		line-height: 48rpx;
	}

	.tips {
		font-size: 26rpx;
		color: #585F70;
		line-height: 48rpx;
		margin-top: 10rpx;
		margin-bottom: 96rpx;
	}

	.item-row {
		width: 100%;
		height: 88rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 32rpx;
		color: #021624;
		line-height: 48rpx;
		margin-bottom: 32rpx;

		input {
			flex: 1;
			margin-left: 32rpx;
		}
	}

	.right-img {
		width: 20rpx;
		height: 24rpx;
		margin-left: 26rpx;
		transform: rotate(90deg);
	}

	.confirm-btn {
		height: 96rpx;
		line-height: 96rpx;
		text-align: center;
		background: rgba(1, 203, 255, 1);
		border-radius: 48rpx;
		font-size: 32rpx;
		color: #FFFFFF;
	}

	.enable {
		background: rgba(1, 203, 255, 0.2);
	}
</style>
